@layer base {
	* {
		box-sizing: border-box;
	}

	html {
		box-sizing: border-box;
		text-size-adjust: none;
		font-family: '💪';
	}

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	@font-face {
		font-family: '💪';
		src:
			url('https://fonts.tolin.ski/fonts/MDIOVariable.woff2') format('woff2'),
			url('https://fonts.tolin.ski/fonts/MDIOVariable.woff') format('woff'),
			local('MD IO Variable Regular'),
			local('MDIOVariable-Regular');
		font-weight: 100 900;
		font-style: normal italic;
	}

	.fst-100 {
		font-variation-settings: var(--fw-100);
	}

	.fst-100-i {
		font-variation-settings: var(--fw-100-italic);
	}

	.fst-400 {
		font-variation-settings: var(--fw-400);
	}

	.fst-400-i {
		font-variation-settings: var(--fw-400-italic);
	}

	.fst-500 {
		font-variation-settings: var(--fw-500);
	}

	.fst-500-i {
		font-variation-settings: var(--fw-500-italic);
	}

	.fst-600 {
		font-variation-settings: var(--fw-600);
	}

	.fst-600-i {
		font-variation-settings: var(--fw-600-italic);
	}

	.fst-700 {
		font-variation-settings: var(--fw-700);
	}

	.fst-700-i {
		font-variation-settings: var(--fw-700-italic);
	}

	.fst-800 {
		font-variation-settings: var(--fw-800);
	}

	.fst-800-i {
		font-variation-settings: var(--fw-800-italic);
	}

	.fst-900 {
		font-variation-settings: var(--fw-900);
	}

	.fst-900-i {
		font-variation-settings: var(--fw-900-italic);
	}

	h1,
	.h1 {
		font-size: var(--font-size-xxxl);
	}

	h2,
	.h2 {
		font-size: var(--font-size-xxl);
	}

	h3,
	.h3 {
		font-size: var(--font-size-xl);
	}

	h4,
	.h4 {
		font-size: var(--font-size-lg);
	}

	h5,
	.h5 {
		font-size: var(--font-size-md);
	}

	.h6,
	h6,
	p,
	li {
		font-size: var(--font-size-base);
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: '💪';
		letter-spacing: -0.04em;
		line-height: 1.4;
		margin-block: 0.2em;
		mask-image: url('$assets/Grit Mask@2x.png');
		mask-repeat: repeat;
		mask-size: 250px;
		text-wrap: balance;
		font-variation-settings:
			'wght' 700,
			'ital' 1;

		--opacity: 0;

		&:hover {
			--opacity: 1;
		}

		a[href^='#'] {
			display: inline-block;
			height: 100%;
			margin-left: 0.25rem;
			opacity: var(--opacity);

			&::before {
				content: '#';
			}
		}
	}

	.spa-ran-wrap {
		--color: var(--spa-ran-wrap-bg, transparent);
		--size: 2.3345ex;

		background-image: linear-gradient(
			180deg,
			var(--color) 0%,
			var(--color) 50%,
			transparent 50%,
			transparent 100%
		);
		background-size: auto var(--size);
		background-position: 10px calc(var(--size) / 4);
	}

	body {
		padding: 0;
		margin: 0;
		background: var(--black);
	}

	a,
	.a {
		color: var(--link-fg, var(--fg));
		text-decoration: none;
	}

	:is(p, li) a,
	.a {
		color: var(--color-sheet);
		text-decoration: underline;
		text-decoration-color: var(--primary);
		text-decoration-thickness: 1.5px;
	}

	a:hover {
		cursor: pointer;
	}

	p {
		line-height: 1.7;
	}

	ul {
		@media (--below-med) {
			padding: 0;
		}
	}

	/* Show Notes Typography - coming from markdown so it must be global */
	.show-notes {
		h2,
		h3 {
			font-size: var(--font-size-lg);
		}

		ul {
			padding-left: 20px;
		}
	}

	li {
		line-height: 2.2;
		list-style-type: circle;
	}

	ol li {
		list-style-type: decimal;
	}

	a[href^='#t='] {
		background: var(--bg-1);
		padding: 4px 6px;
		border-bottom: none;
		text-decoration: none;
		color: var(--color-2);
		border-radius: 4px;
		position: relative;
		font-size: var(--font-size-sm);
		font-variation-settings: var(--fw-800);

		@media (--above-med) {
			left: -17px;
		}
	}

	[popover] {
		position: fixed;
		z-index: 10;
		inset: 0;
		padding: 0.25em;
		width: fit-content;
		height: fit-content;
		border-image: initial;
		border-style: solid;
		overflow: auto;
		margin: auto;
	}

	/* stylelint-disable selector-class-pattern */
	[popover]:not(.\:popover-open) {
		display: none;
	}

	[popover]:is(dialog[open]) {
		display: revert;
	}

	[anchor].\:popover-open {
		inset: auto;
	}

	/* This older `:open` pseudo selector is deprecated and support will be removed
in a later release. */
	@supports selector([popover]:open) {
		[popover]:not(.\:popover-open, dialog[open]) {
			display: revert;
		}

		/* stylelint-disable selector-pseudo-class-no-unknown */
		[anchor]:is(:open) {
			inset: auto;
		}
		/* stylelint-enable selector-pseudo-class-no-unknown */
	}

	@supports selector([popover]:popover-open) {
		[popover]:not(.\:popover-open, dialog[open]) {
			display: revert;
		}

		/* stylelint-disable selector-pseudo-class-no-unknown */
		[anchor]:is(:popover-open) {
			inset: auto;
		}
		/* stylelint-enable selector-pseudo-class-no-unknown */
	}
	/* stylelint-enable selector-class-pattern */

	@supports (width: -moz-fit-content) {
		[popover] {
			/* stylelint-disable value-no-vendor-prefix */
			width: -moz-fit-content;
			height: -moz-fit-content;
			/* stylelint-enable value-no-vendor-prefix */
		}
	}

	@supports not (inset: 0) {
		[popover] {
			/* stylelint-disable declaration-block-no-redundant-longhand-properties */
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			/* stylelint-enable declaration-block-no-redundant-longhand-properties */
		}
	}
}

/* Popover */

/* All External Links (links starting with http(s)) */
a[href^='http']:not(.social-icon, .button, .icon, .naked)::after {
	content: '↗';
	margin-left: 4px;
	font-size: 12px;
}

/* Selection */
::selection {
	background: var(--primary);
	color: var(--dark);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Scrollbars */
html {
	--track: var(--black);
	--thumb: var(--primary);

	scrollbar-color: var(--thumb) var(--track);
	scrollbar-width: thin;
}

.admin :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
	font-variation-settings: var(--fw-400);
}
